<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24">
            <a-form-item label="数据源">
              <a-select :size="size" :defaultValue="getCellValue(props, 'datasourceId')" @change="(val) => setCellValue(props, 'datasourceId', val)">
                <template v-for="item in listDatabase.list" :key="`${item.value}`">
                  <a-select-option :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24">
            <a-form-item label="语句类型">
              <a-select
                :size="size"
                :defaultValue="getCellValue(props, 'statementType', 'select')"
                @change="(val) => setCellValue(props, 'statementType', val)"
              >
                <a-select-option value="select">select</a-select-option>
                <a-select-option value="selectOne">selectOne</a-select-option>
                <a-select-option value="selectInt">selectInt</a-select-option>
                <a-select-option value="insert">insert</a-select-option>
                <a-select-option value="delete">delete</a-select-option>
                <a-select-option value="update">update</a-select-option>
                <a-select-option value="insertofPk">insertofPk</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24">
            <a-form-item label="其它">
              <SpiderSelect :editor="editor" :cell="cell" :options="selectConfig" />
            </a-form-item>
          </a-col>
          <a-col :span="24" ref="sql">
            <a-form-item
              label="SQL语句"
              :label-col="{ span: direction == 'bottom' ? 1 : 5 }"
              :wrapper-col="{ span: direction == 'bottom' ? 20 : 17 }"
            >
              <a-textarea :size="size" :defaultValue="getCellValue(props, 'sql')" @change="(val) => setCellValue(props, 'sql', val)" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import { loadDataSource } from '../design.api';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const selectConfig = ref([
    {
      label: '输出到sqlRowSet流',
      value: 'isStream',
      defaultVal: '0',
    },
  ]);
  const listDatabase = reactive({ list: [] });
  const value = ref();
  const sql = ref();

  onMounted(() => {
    loadDataSource()
      .then((res) => {
        listDatabase.list = res;
      })
      .catch(() => {
        listDatabase.list = [];
      });
  });
  defineExpose({
    value,
    sql,
  });
</script>

<style lang="less" scoped></style>
